<template>
  <div class="box">
    <div class="header">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        shape="round"
      >
    <template #left>
      <van-icon @click="$router.back()" name="arrow-left" size="18"/>
    </template>
    <template #action>
      <div ><button class="btn-ser" @click="onSearch">搜索</button></div>
    </template>
</van-search>
    </div>
    <div class="content">
      <h3 class="zuijin">最近搜索</h3>
      <!--  -->
        <van-tag @click="onSearchFn(item)" class="tag111" v-for="(item, index) in listArr" :key="index" color="rgba(0,0,0,.05)" text-color="#666" >
          {{item}}
        </van-tag>
            <!-- padding-right: 2px;
            overflow: hidden;
            font-size: 12px;
            text-align: center; -->

      <h3 class="renmen">热门搜索</h3>
          <van-tag @click="onSearchFn(item.keyword)" class="tag111" v-for="(item, index) in hotList" :key="index" color="rgba(0,0,0,.05)" text-color="#666" >
          {{item.keyword}}
        </van-tag>
    </div>
  </div>
</template>
<script>
import {getHotList} from "../../api/search"
import Vue from 'vue'
import { Search  , Tag} from 'vant'
Vue.use(Tag);
Vue.use(Search)
export default {
  data () {
    return {
      keyword: '',
      listArr:[],
      hotList:[]
    }
  },
  methods: {
    onHistoy(){
      const list = JSON.parse(localStorage.getItem('list')) || []
      // console.log(list);
      const index = list.findIndex( item => item === this.keyword)

      console.log(index);
      if(index === -1){
        list.unshift(this.keyword)
      }else{
        list.splice(index , 1)
        list.unshift(this.keyword)
      }
      list.forEach(item => {
        if(item === ''){
          list.splice(item , 1)
        }
      });
      this.listArr = list
      console.log(this.listArr);
      localStorage.setItem('list' , JSON.stringify(list))
    },
    onSearch () {
      this.onHistoy()
      
      this.$router.push('/searchresult?keyword=' + this.keyword)
      
    },
    onSearchFn(val){
      console.log(val);
      this.$router.push('/searchresult?keyword=' + val)
    }
  },
  mounted(){
    this.onHistoy()

    getHotList().then(res => {
      res.data.data.forEach(item => {
        if(item.keyword === ""){
          console.log('不要');
        }else if(item.keyword === undefined ){
          console.log( '空的');
        }else{
          this.hotList.push(item)
        }
      })
      
      
      console.log(this.hotList);
    })
  }
}
</script>
<style lang="stylus" scoped>
.van-search
  padding 5px 12px
.btn-ser
  height: .28rem
  width: .40rem
  background-color: #e93b3d;
  color: #fff;
  box-sizing: border-box
  border: none
  border-radius: 6px
.content
  padding: 0 20px
.tag111
  padding: 2px 8px
  text-align: center
  margin-right: 10px
  margin-bottom: 10px
</style>